<template>
  <div class="dataVisualize-box">
    <div class="card top-box">
      <div class="top-title">数据可视化</div>
      <el-tabs v-model="tabActive" class="demo-tabs">
        <el-tab-pane
          v-for="item in tab"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>
      <div class="top-content">
        <el-row :gutter="40">
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <div class="item-left sle">
              <span class="left-title">文章访问总热度</span>
              <div class="img-box">
                <img src="./images/book-sum.png" alt="" />
              </div>
              <span class="left-number">88.13k</span>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <div class="item-center">
              <div class="gitee-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_person.png" alt="" />
                </div>
                <span class="item-value">2222</span>
                <span class="traffic-name sle">家政清洁 访问量</span>
              </div>
              <div class="gitHub-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_team.png" alt="" />
                </div>
                <span class="item-value">2222</span>
                <span class="traffic-name sle">月嫂陪护 访问量</span>
              </div>
              <div class="today-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/today.png" alt="" />
                </div>
                <span class="item-value">4567</span>
                <span class="traffic-name sle">今日访问量</span>
              </div>
              <div class="yesterday-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/book_sum.png" alt="" />
                </div>
                <span class="item-value">1234</span>
                <span class="traffic-name sle">昨日访问量</span>
              </div>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <div class="item-right">
              <div class="echarts-title">文章发布 / 类型 数据占比</div>
              <div class="book-echarts">
                <Pie ref="pieRef" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="card bottom-box">
      <div class="bottom-title">文章类型访问量统计</div>
      <div class="bottom-tabs">
        <el-tabs v-model="tabActive" class="demo-tabs">
          <el-tab-pane
            v-for="item in tab"
            :key="item.name"
            :label="item.label"
            :name="item.name"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="curve-echarts">
        <Curve ref="curveRef" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataVisualize">
import { ref, onMounted } from "vue";
import Pie from "./components/pie.vue";
import Curve from "./components/curve.vue";
import axios from "axios";

const tabActive = ref(1);
const pieRef = ref();
const curveRef = ref();
const cleaning = ref(null) as any //保洁圈子访问量
const maintenance = ref(null) as any //维修圈子访问量
const installation = ref(null) as any //安装圈子访问量
const accompanying = ref(null) as any //陪护圈子访问量
const doctorvisit = ref(null) as any //看诊圈子访问量
const familyeducation = ref(null) as any //家教圈子访问量
const unlock = ref(null) as any //开锁圈子访问量
const other = ref(null) as any //其他圈子访问量

onMounted(() => {
  getlist();
});

function getlist() {
  axios.get("http://127.0.0.1:3000/tyh/dynamiclist").then((res) => {
    console.log("res::::::::", res.data.data);
    // res.data.data.forEach((item) => {
    //   if (item.type === "家庭保洁") {
    //     cleaning.value += parseInt(item.like);
    //   } else if (item.type === "家具维修") {
    //     maintenance.value += parseInt(item.like);
    //   } else if (item.type === "家具安装") {
    //     installation.value += parseInt(item.like);
    //   } else if (item.type === "月嫂陪护") {
    //     accompanying.value += parseInt(item.like);
    //   } else if (item.type === "上门看诊") {
    //     doctorvisit.value += parseInt(item.like);
    //   } else if (item.type === "上门家教") {
    //     familyeducation.value += parseInt(item.like);
    //   } else if (item.type === "开锁服务") {
    //     unlock.value += parseInt(item.like);
    //   } else if (item.type === "其他类型") {
    //     other.value += parseInt(item.like);
    //   }
    // });
    //饼形图数据
    res.data.data.map((item :any) => {
      if (pieData.findIndex((pie) => pie.name === item.type) === -1) {
        pieData.push({ value: 1, name: item.type });
      } else {
        pieData[pieData.findIndex((pie) => pie.name === item.type)].value =
          pieData[pieData.findIndex((pie) => pie.name === item.type)].value + 1;
      }
    });
    pieRef.value.initChart(pieData);
    //柱状图数据
    res.data.data.map((item: any) => {
      if (curveData.findIndex((pie) => pie.spotName === item.type) === -1) {
        curveData.push({ value: item.like, spotName: item.type });
      } else {
        curveData[curveData.findIndex((pie) => pie.spotName === item.type)].value = curveData[curveData.findIndex((pie) => pie.spotName === item.type)].value + Number(item.like);
      }
    });
    curveRef.value.initChart(curveData);
  });
}

const tab = [
  { label: "未来7日", name: 1 },
  { label: "近七日", name: 2 },
  { label: "近一月", name: 3 },
  { label: "近三月", name: 4 },
  { label: "近半年", name: 5 },
  { label: "近一年", name: 6 },
];
const pieData = [];
const curveData = [];
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
